<template>
	<view style="padding: 0 20rpx;margin-bottom: 170rpx;">
		<view class="xxl mt20">
			审核状态：商品有定损
		</view>
		<view class="mt20 row">
			订单号：{{info.order_sn}}
			<image @tap="toCopy(info.order_sn)" src="../../static/images/copy_icon_white.png" style="width: 30rpx;"
				mode="widthFix">
			</image>
		</view>
		<view class="card">
			<view class="mb20">
				门店信息：
			</view>
			<view class="row" style="gap: 20rpx;">
				<u-image :src="info.logo" border-radius="20" mode="aspectFill" width="160" height="160"></u-image>
				<view class="flex1 column-around" style="align-items: start;gap: 30rpx;">
					<view class="row-between" style="width: 100%;">
						<view class="row">
							联系门店：
						</view>
						<view class="row">
							<image src="../../../static/images/icon_7.png" mode="widthFix" style="width: 30rpx;">
							</image>
							<text class="ml10 mr20 lighter">{{info.tel}}</text>
							<image src="../../../static/images/icon_6.png" mode="widthFix" style="width: 40rpx;"
								@tap="callPhone(info.tel)">
							</image>
						</view>
					</view>
					<view class="row-between" style="width: 100%;">
						<view class="row">
							联系平台：
						</view>
						<view class="row">
							<image src="../../../static/images/icon_7.png" mode="widthFix" style="width: 30rpx;">
							</image>
							<text class="ml10 mr20 lighter">{{info.pt_tel}}</text>
							<image src="../../../static/images/icon_6.png" mode="widthFix" style="width: 40rpx;"
								@tap="callPhone(info.pt_tel)">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="mb20" style="padding: 20rpx;background-color: #f5f9fa;">
				失败原因：<text style="color: #dc503f;">{{info.return_goods.beizhu}}</text>
			</view>
			<view class="row" style="gap: 20rpx;">
				<u-image :src="info.goods_image" border-radius="20" mode="aspectFill" width="120"
					height="120"></u-image>
				<view class="flex1 column-center" style="gap: 20rpx;align-items: start;">
					<text>{{info.goods_name}}</text>
					<text class="muted xs">下单时间：{{info.create_time}}</text>
				</view>
			</view>

			<view class="mt30 mb30" style="width: 100%;height: 2rpx;background-color: #eee;"></view>
			<view class="xxl">
				定损详情
			</view>
			<view class="mt20 row-around">
				<view class="img-view">
					<video :src="info.abs_image.video[0]" class="img-style"></video>
					<view class="row-center mt20">产品原视频</view>
				</view>
				<view class="img-view">
					<video :src="info.abs_image2.video[0]" class="img-style"></video>
					<view class="row-center mt20">归还视频</view>
				</view>
			</view>
			<view class="mt30 mb30" style="width: 100%;height: 2rpx;background-color: #eee;"></view>
			<view class="xxl">
				使用前后对比
			</view>
			<view class="mt20 row-around wrap">
				<block v-if="imgs.length>0" v-for="(item,index) in imgs" :key="index">
					<view class="img-view">
						<image :src="item" mode="aspectFill" class="img-style"></image>
						<view class="row-center mt20">产品原图片</view>
					</view>
					<view class="img-view">
						<image :src="info.abs_image2.img[index]" mode="aspectFill" class="img-style"></image>
						<view class="row-center mt20">归还图片</view>
					</view>
				</block>
			</view>
		</view>
		<view class="footer">
			<u-button shape="circle" type="error" :custom-style="{'backgroundColor':'#dc503f'}">
				定损赔偿金额：{{info.money}}元
			</u-button>
		</view>
		<loading-view v-if="showLoading"></loading-view>
	</view>
</template>

<script>
	import {
		copy,
		uploadFile
	} from '../../../utils/tools';
	import {
		getUserReviewDetails,
	} from '../../../api/user';
	export default {
		data() {
			return {
				info: null,
				showLoading: true,
				imgs: []
			};
		},
		onLoad(options) {
			const id = options.id;
			// const lat = uni.getStorageSync("City_lat");
			// const lng = uni.getStorageSync("City_lng");
			getUserReviewDetails({
				id,
				// lng,
				// lat
			}).then(res => {
				if (res.code !== 1) return this.$toast({
					title: res.msg
				}, {
					tab: 3,
					url: 1
				});
				this.info = res.data;
				this.imgs = res.data.abs_image.img;
				this.showLoading = false;
			})
		},
		methods: {
			toCopy(text) {
				copy(text)
			},
			callPhone(val) {
				uni.makePhoneCall({
					phoneNumber: val
				})
			},
			preview() {
				uni.previewImage({
					urls: []
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #dc503f;
		color: white;

		.card {
			border-radius: 14rpx;
			background-color: white;
			color: #333;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
		}

		.footer {
			position: fixed;
			bottom: 0%;
			width: 100%;
			left: 0;
			background-color: white;
			padding: 20rpx 20rpx calc(env(safe-area-inset-bottom) + 30rpx);
		}

		.img-view {
			width: 280rpx;
			margin-top: 20rpx;

			.img-style {
				width: 100%;
				height: 280rpx;
				border-radius: 20rpx;
			}
		}

	}

	.u-list-item {
		margin: 0 !important;
	}
</style>